<template>
  <view class="expert-show">
    <view class="user-wrap rbox">
      <view class="avatar"></view>
      <view class="info cobx">
        <view class="tit">李医生</view>
        <view class="sub">植物病害专家</view>
        <view class="bottom">广东省北京大学深证医院</view>
      </view>
    </view>

    <view class="tags-wrap cbox">
      <text class="tags-wrap-tit">擅长病害</text>
      <view class="tags rbox_wrap">
        <view class="tag">霜霉病</view>
        <view class="tag">霜霉病</view>
        <view class="tag">霜霉病</view>
        <view class="tag">霜霉病</view>
        <view class="tag">霜霉病</view>
        <view class="tag">霜霉病</view>
        <view class="tag">霜霉病</view>
      </view>
    </view>

    <view class="user-info cbox">
      <text class="user-info-tit">医师简介</text>
      <text class="info"
        >医生，钻研学习医学科学技术，挽救生命以治病为业的人，一
        般指临床医师。按照卫生部、卫健委、医政部有关医疗卫生管
        理条例的法律法规，主持医患沟通，学术讨论，新技术推广、
        预后分析、公众教育、护理示教、康复培训、出院教育、执行
        卫生防疫、计生、大病早期识别干预等法律政治责任、承担部
        分课题研究等工作，预防出生缺陷提高人口素质，治病救人，
        履行病情如实告知、合理检查、合理开药、正确诊断，积极治
        疗的责任。提高医生职业风险和医疗事故安全法律意识，避免
        误诊漏诊、控制医源性继发损害、纠正违章作业等法律责任，
        通过定期临床理论考试，技能考核培训
      </text>
    </view>

    <view class="btn-wrap rbox box_center">
      <view class="btn-light rbox box_center">在线咨询</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.expert-show {
  min-height: 100vh;
  background-color: #f7f7f7;
  .user-wrap {
    padding: 24rpx 54rpx;
    background-color: #1de1c3;
    .avatar {
      width: 128rpx;
      height: 128rpx;
      background-color: #e8d9d9;
      border-radius: 50%;
    }
    .info {
      margin-left: 28rpx;
      .tit {
        font-size: 40rpx;
        line-height: 1;
        color: #fff;
      }
      .sub {
        margin-top: 15rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #fff;
      }
      .bottom {
        margin-top: 10rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #fff;
      }
    }
  }
  .tags-wrap {
    padding: 40rpx 42rpx 0;
    background-color: #fff;
    .tags-wrap-tit {
      font-size: 32rpx;
      line-height: 1;
      color: #333;
    }
    .tags {
      padding: 30rpx 0 10rpx;
      border-bottom: 1rpx solid #d1d1d1;
      .tag {
        margin: 0 30rpx 20rpx 0;
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        line-height: 1;
        color: #1de1c3;
        border: 1rpx solid currentColor;
        border-radius: 22rpx;
      }
    }
  }
  .user-info {
    padding: 30rpx 42rpx;
    background-color: #fff;
    .user-info-tit {
      font-size: 32rpx;
      line-height: 1;
      color: #333;
    }
    .info {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #c8c8c8;
    }
  }
  .btn-light {
    margin-top: 100rpx;
    padding: 20rpx 96rpx;
    font-size: 32rpx;
    line-height: 1;
    color: #1de1c3;
    background-color: #fff;
    border: 1rpx solid currentColor;
    border-radius: 40rpx;
  }
}
</style>